<script>
import { onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";

export default {
  setup() {
    let router = useRouter();
    const feedback = reactive({
      i: 1,
      fileList: [],
      feedimg: "",
      textlist: [],
      textdata: "",
      textdatas: "",
      remnant: "500", //反馈内容
      remnants: "200", //联系方式
    });
    onMounted(() => {
      feedback.textlist = JSON.parse(localStorage.getItem("textlist"));
    });
    const submit = () => {
      Toast("提交成功");
      feedback.textlist.push({
        text: feedback.textdata,
        phone: feedback.textdatas,
        feedimg: feedback.feedimg,
      });
      console.log(feedback.textlist);
      window.localStorage.setItem(
        "textlist",
        JSON.stringify(feedback.textlist)
      );
      feedback.textlist = JSON.parse(localStorage.getItem("textlist"));
      router.push({ path: "/mybag", query: { id: 503 } });
    };
    // 反馈内容
    const descInput = ()=>{
      if (feedback.textdata.length) {
        var txtval = feedback.textdata.length;
        feedback.remnant = 500 - txtval;
      }
    }
    // 联系方式
    const descInputs = ()=>{
       if (feedback.textdatas.length) {
        var txtvals = feedback.textdatas.length;
      feedback.remnants = 200 - txtvals;
      }
    }
    const afterRead = (file) =>{
      // 此时可以自行将文件上传至服务器
      feedback.feedimg = file.content;
      // console.log(this.feedimg);
    }
    return {
      ...toRefs(feedback),
      submit,
      descInput,
      descInputs,
      afterRead,
    };
  },
};
</script>

<template>
  <div class="container feedback">
    <div class="top">
      <i class="iconfont icon-zuobian" @click="$router.go(-1)"></i>
      <span>我的反馈</span>
    </div>

    <!-- 反馈类型 -->
    <div class="type">
      <h3>反馈类型</h3>
      <ul>
        <li @click="i = 1" :class="{ active: i == 1 }">建议</li>
        <li @click="i = 2" :class="{ active: i == 2 }">错误</li>
        <li @click="i = 3" :class="{ active: i == 3 }">其它</li>
        <li @click="i = 4" :class="{ active: i == 4 }">改进</li>
      </ul>
    </div>

    <div class="gary-border"></div>

    <!-- 反馈内容 -->
    <div class="content">
      <h3>反馈内容</h3>
      <textarea
        data-v-7df26c27=""
        placeholder="请尽量详细描述你要反馈的问题，以便我们尽快为你解决"
        maxlength="500"
        class="msg"
        v-model="textdata"
        @input="descInput"
      ></textarea>
      <div class="num">{{ remnant }}/500</div>
    </div>

    <div class="gary-border"></div>

    <!-- 联系方式 -->
    <div class="content">
      <h3>联系方式</h3>
      <textarea
        data-v-7df26c27=""
        placeholder="请输入您的主要联系方式比如微信、QQ、手机号等，方便我们与您联系"
        maxlength="200"
        class="msg"
        style="height: 100px"
        v-model="textdatas"
        @input="descInputs"
      ></textarea>
      <div class="num">{{ remnants }}/200</div>
    </div>

    <div class="gary-border"></div>

    <!-- 截图上传 -->
    <div class="img">
      <h3>截图上传</h3>
      <van-uploader :after-read="afterRead" v-model="fileList" multiple />
      <button type="button" class="login" @click="submit">提交</button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.feedback {
  background-color: #fff;
  .top {
    height: 49px;
    height: 49px;
    padding: 5px 10px;
    background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .iconfont {
      color: #fff;
      font-size: 20px;
    }
    span {
      flex: 1;
      // text-align: center;
      padding-left: 33%;
      font-size: 18px;
      color: #fff;
    }
  }
  .type {
    padding: 0px 15px;
    h3 {
      padding: 10px 0;
      color: #333;
      font-size: 16px;
      font-weight: bold;
    }
    ul {
      margin-top: 10px;
      margin-bottom: 15px;
      display: flex;
      li {
        width: 88px;
        line-height: 40px;
        text-align: center;
        border-radius: 30px;
        border: 1px solid #ddd;
        margin-right: 10px;
      }
      .active {
        background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
        color: #fff;
        border: 1px solid #ebcbab !important;
      }
    }
  }
  .gary-border {
    height: 10px;
    background-color: #f4f4f4;
  }
  .content {
    padding: 15px;
    h3 {
      padding: 10px 0;
      color: #333;
      font-size: 16px;
      font-weight: bold;
    }
    textarea {
      width: 100%;
      height: 200px;
      border: none;
      outline: none;
      &::placeholder {
        font-size: 14px;
      }
    }
    .num {
      text-align: right;
      font-size: 16px;
      color: #ddd;
    }
  }
  .img {
    padding: 15px;
    h3 {
      padding: 10px 0;
      color: #333;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 15px;
    }
    .login {
      width: 100%;
      font-size: 18px;
      color: #fff;
      text-align: center;
      background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
      border: none;
      margin-top: 30px;
      height: 45px;
      border-radius: 30px;
      letter-spacing: 3px;
    }
  }
}
</style>